<template>
  <div class="rich">
    <div v-html="content" v-lazy-container="{ selector: 'img' }" @click.stop.prevent="imageChgange($event)"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ``,
      arrImg: [],
    };
  },
  created() {
    window.setH5Content = this.setH5Content;
  },
  mounted() { },
  methods: {
    setH5Content(content) {
      this.content = content;
      this.content = this.content.replace(/src/g, "data-src");
      let img = this.getObjectKeys(this.content.match(/<img[^>]+>/g));
      this.arrImg = [];
      img.map((e, i) => {
        e.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
          this.arrImg.push(capture);
        });
      });
    },
    getObjectKeys(object) {
      var values = [];
      for (var property in object) values.push(object[property]);
      return values;
    },
    imageChgange(e) {
      if (e.target.nodeName == "IMG") {
        Android.showPhotoViewer(this.arrImg, e.target.currentSrc);
      } else if (e.target.nodeName == "A") {
        Android.onHrefClick(e.target.attributes.href.nodeValue);
      } else {
        return;
      }
    },
  },
};
</script>

<style scoped>
.rich {
  padding: 0 32px;
}

.rich>>>img {
  width: 100%;
  object-fit: cover;
  /* margin: 1em 0; */
}
</style>